<!--
 * @Author: ITDLCL
 * @Date: 2024-11-12 14:24:56
 * @LastEditors: ITDLCL
 * @Description:
-->
<!-- order Cell -->
<template>
  <view class="order-groups border-bottom">
    <view class="order-groups_cell d-flex" v-for="item in list" :key="item.feile">
      <text class="feild-label siyuan-medium">{{ item.name }}</text>
      <view class="feild-data" v-html="getContent(item.feile, item.data)"></view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
let props = defineProps({
  list: {
    type: Array,
    default: [],
  },
});
let html = ref(`<div style='color:red' class='classTest'>hello world</div>`);

let getContent = (feild, data) => {
  let tipList = [
    {
      feild_str: "ticket",
      text: `<span class="siyuan-medium">￥</span><span class="intel-one-mono-medium">${data}</span> <span class="siyuan-medium">张</span>`,
    },
    {
      feild_str: "sum",
      text: `<span class="siyuan-medium f20">￥</span><span class="intel-one-mono-medium f20">${data}</span>`,
    },
    {
      feild_str: "point_deduction",
      text: `<span class="intel-one-mono-medium">${data}</span><span class="siyuan-medium">积分</span>`,
    },
    { feild_str: "pay_method,name,use_method", text: `<span class="siyuan-medium">${data}</span>` },
    {
      feild_str:
        "phone,order_number,order_time,enter_time,room_use_time,room_start_time,room_end_time",
      text: `<span class="intel-one-mono-medium">${data}</span>`,
    },
  ];
  let currentText = tipList.filter(item => item.feild_str.indexOf(feild) > -1);
  return currentText[0] ? currentText[0].text : data;
};
</script>

<style lang="scss">
.order-groups {
  padding: 56rpx 34rpx 44rpx 28rpx;
  background-color: #ffffff;
  &_cell {
    height: 48rpx;
    align-items: center;
    justify-content: space-between;
    font-size: 24rpx;
    text {
      font-size: inherit;
    }
    .feild-data {
      flex: 1;
      height: 100%;
      line-height: 48rpx;
      text-align: right;
    }
  }
}
</style>
